<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../fonts/iconfont/iconfont.css">
    <script src="../jquery/jquery.min.js"></script>
    <!-- 列表页 -->
</head>

<body>
    <div class="box">

        <!-- 头部导航栏 -->
        <div class="index" id="nav">
            <ul>
                <img src=""
                    alt="">
                <li><a href="./login.html">登录/注册</a></li>
                <li><a>消息中心</a></li>
                <li><a>收藏夹</a></li>
                <li><a>郑重声明</a></li>
                <li><a>帮助</a></li>
                <li><input type="text" value="输入商品名或货号"><button class="mybtn"><i
                            class="iconfont icon-search"></i></button>
                    <div class="sous">
                        <ol>
                            <li>热门搜索</li>
                            <li>换一批</li>
                        </ol>
                        <ul>
                            <li>扫除</li>
                            <li>起泡网</li>
                            <li>乳液</li>
                            <li>蜡烛</li>
                            <li>笔记本</li>
                            <li>衣架</li>
                            <li>薯条</li>
                            <li>化妆棉</li>
                        </ul>
                    </div>
                </li>
                <li><i class="iconfont icon-cart"></i></li>
            </ul>
        </div>

        <!-- 渲染内容区域 -->
        <div class="nrong">
            <div class="dadi"></div>
            <div class="part-warp">
                <div class="part-adde">所有分类 ></div>
                <div class="part-input">
                    <input type="search" value="在当前结果中搜索">
                </div>

            </div>
            <div class="part-fl">
                <ul class="category">
                    <li class="cate active">所有分类</li>
                    <li class="cate">内衣配饰</li>
                    <li class="cate">大家电</li>
                    <li class="cate">食品酒水</li>
                    <li class="cate">童装玩具</li>
                </ul>
                <div class="xbiao">更多<i class="iconfont icon-moreunfold"></i></div>
            </div>

            <!-- 综合排序 -->
            <div class="norp">
                <ul class="norpBox">
                    <li data-type="id" data-method="ASC" class="sort2">综合 升序</li>
                    <li data-type="id" data-method="DESC" class="sort2">综合 降序</li>
                    <li data-type="price" data-method="ASC" class="sort2">价格升序</li>
                    <li data-type="price" data-method="DESC" class="sort2">价格降序</li>
                </ul>
            </div>

        </div>

        <!-- 渲染商品数据 -->
        <div class="nrong_two">

            <ul class="content container">
                <li>
                    <div class="show">
                        <img src="" alt="">
                        <span class="hot active"> HOT </span>
                        <span class="sale active"> SALE </span>
                    </div>
                    <div class="info">
                        <p class="title"> 商品介绍按时缴费的宫颈癌三缸发动机阿三哥发动机号按实 </p>
                        <p>
                            折扣: 9
                        </p>
                        <p class="price">
                            <span class="current"> ￥ 100.00 </span>
                        </p>
                        <p>
                            <button>加入购物车</button>
                        </p>
                    </div>
                </li>
            </ul>
        </div>

    </div>

    <!-- 切换页面 第几页-->
    <div class="hye">
        <div>
            <a href="javascript:void(0);" class="addre">上一页</a>
            <a href="javascript:void(0);">1</a>
            <a href="javascript:void(0);">2</a>
            <a href="javascript:void(0);">3</a>
            <a href="javascript:void(0);">4</a>
            <a href="javascript:void(0);" class="preed">下一页</a>
        </div>
    </div>

    <!-- 底部 -->
    <div class="bottom">
        <div class="btm1">
            <ul>
                <li>@ghavsh uqgsugs quuqgd.</li>
                <li>营业执照</li>
                <li>陆icp08182256</li>
                <li>@无印良品上海商业有限公司</li>
                <li>食品经营许可证</li>
                <li>陆公安27813783273</li>
                <li>地址：上海市</li>
                <li>出版经营许可</li>
                <li>上海供货商</li>
            </ul>
        </div>
    </div>
    </div>
</body>

<script src="../js/utils.js"></script>
<script src="../jquery/jquery.min.js"></script>
<script src="../js/list.js"></script>

</html>